<template>
    <div>
<!--        <div class="pad_20 flex ba_f">-->
<!--            <div class="fon_12 mar_r10 color_9">-->
<!--                <span class="fon_14 color_3">选择日期：</span>-->
<!--                <el-date-picker-->
<!--                        v-model="form.time"-->
<!--                        type="daterange"-->
<!--                        range-separator="至"-->
<!--                        start-placeholder="开始日期"-->
<!--                        end-placeholder="结束日期"-->
<!--                        format="yyyy年MM月dd日"-->
<!--                        class="mar_l10"-->
<!--                        @change="changeTime">-->
<!--                </el-date-picker>-->
<!--            </div>-->
<!--        </div>-->
      <div class="ba_f pad_20 mar_t20">
        <div class="shuju_title mar_b20">
          <div class="shuju_title_text">
            <span>账户概况</span>
          </div>
        </div>
        <div class="main-icon flex t_l mar_t20">
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">门店总金额(元)</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{cwData.allMoney || 0}}</p>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">待结算金额(元)</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{cwData.waitMoney || 0}}</p>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG mar_r20">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">已提现余额(元)</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{cwData.financeMoney || 0}}</p>
              </div>
            </div>
          </div>
          <div class="flex-1 t_l pad_20 borderBG">
            <div class="flex-bet flex-y-top">
              <div>
                <p class="color_9 fon_14">累计收入(元)</p>
                <p class="fon_30 title35 lh16 pad_tb_20 wei">{{cwData.cumulative || 0}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="outmain ba_f mar_t20">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>交易概况</span>
                </div>
            </div>
<!--            <div class="main-icon flex t_l mar_t20">-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">有效支付金额</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.payMoney}}</p>-->
<!--                            <p class="fon_12 title6 lh25">微信支付：{{cwData.wxPay}}</p>-->
<!--                            <p class="fon_12 title6 lh25">余额支付：{{cwData.balance}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内有效订单的总计金额，包含商品销售额+包装销售额+配送费+活动补贴</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">有效订单数</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.payNum}}</p>-->
<!--                            <p class="fon_12 title6 lh25">自提订单：{{cwData.inOrderNum}}</p>-->
<!--                            <p class="fon_12 title6 lh25">外卖订单：{{cwData.outOrderNum}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计时间内，未取消且未发生退款的订单量</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">支付人数</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.userCount}}</p>-->
<!--                            <p class="fon_12 title6 lh25">浏览量：{{cwData.viewsCount}}</p>-->
<!--                            <p class="fon_12 title6 lh25">访客量：{{cwData.visitCount}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">统计周期内，付款成功的用户数，一人多次结算记为一人</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">总退款金额</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.refundMoney}}</p>-->
<!--                            <p class="fon_12 title6 lh25">用户取消订单：{{cwData.userRefundMoney}}</p>-->
<!--                            <p class="fon_12 title6 lh25">商家拒单订单：{{cwData.storeRefundMoney}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">总退款金额</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="flex-1 t_l pad_20 bortColor">-->
<!--                    <div class="flex-bet flex-y-top">-->
<!--                        <div>-->
<!--                            <p class="title6 fon_14">客单价</p>-->
<!--                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.unitPrice}}</p>-->
<!--                            <p class="fon_12 title6 lh25">下单转化率：{{cwData.singleRate}}</p>-->
<!--                            <p class="fon_12 title6 lh25">下单跳失率：{{cwData.jumpRate}}</p>-->
<!--                        </div>-->
<!--                        <div class="toolTip">-->
<!--                            <el-tooltip effect="dark" placement="top">-->
<!--                                <div slot="content">客单价</div>-->
<!--                                <button type="button"-->
<!--                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">-->
<!--                                    <span><i class="el-icon-question"></i></span>-->
<!--                                </button>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;                <div class="flex-1 t_l pad_20 bortColor">&ndash;&gt;-->
<!--                &lt;!&ndash;                    <div class="flex-bet flex-y-top">&ndash;&gt;-->
<!--                &lt;!&ndash;                        <div>&ndash;&gt;-->
<!--                &lt;!&ndash;                            <p class="title6 fon_14">下单转化率</p>&ndash;&gt;-->
<!--                &lt;!&ndash;                            <p class="fon_30 title35 lh16 pad_tb_20">{{cwData.todayConver}}</p>&ndash;&gt;-->
<!--                &lt;!&ndash;                            <p class="fon_12 title6 lh25">较前一日：{{cwData.newConver}}</p>&ndash;&gt;-->
<!--                &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                        <div class="toolTip">&ndash;&gt;-->
<!--                &lt;!&ndash;                            <el-tooltip effect="dark" placement="top">&ndash;&gt;-->
<!--                &lt;!&ndash;                                <div slot="content">下单人数/访问人数</div>&ndash;&gt;-->
<!--                &lt;!&ndash;                                <button type="button"&ndash;&gt;-->
<!--                &lt;!&ndash;                                        class="el-button question-button-tooltip el-tooltip el-button&#45;&#45;text fon_12">&ndash;&gt;-->
<!--                &lt;!&ndash;                                    <span><i class="el-icon-question"></i></span>&ndash;&gt;-->
<!--                &lt;!&ndash;                                </button>&ndash;&gt;-->
<!--                &lt;!&ndash;                            </el-tooltip>&ndash;&gt;-->
<!--                &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                    </div>&ndash;&gt;-->
<!--                &lt;!&ndash;                </div>&ndash;&gt;-->
<!--            </div>-->
            <div id="zhentiEch" style="height: 360px;" class="mar_t40"></div>
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {getFinanceData,assetOverview} from "@/api/statistics";
    import {changeDate} from "@/utils/index";
    import {mapState} from 'vuex'
    export default {
        mounted() {
            // this.bus.$emit('loading', true);
            this.init();
        },
        // created() {
        //     this.form.shopValue = this.market[0].id
        //     this.options = this.market
        // },
        computed:{
            ...mapState(['storeId'])
        },
        data() {
            return {
                form: {
                    shopValue: '1',
                    timeType: '1',
                    time: [new Date(),new Date()],
                    Mtime: '',
                },
                options: [{
                    value: '1',
                    label: '全部'
                }],
                options2: [{
                    value: '1',
                    label: '自然日'
                }, {
                    value: '2',
                    label: '自然月'
                }],
                cwData:{},
                echarts2_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['支付金额', '有效订单数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '支付金额',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25,]
                        },
                        {
                            name: '有效订单数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60,]
                        }
                    ]
                },
            }
        },
        methods: {
            init(){
                this.getFinanceData()
            },
            async getFinanceData() {
                // let startTime = '';
                // let endTime = '';
                // if(this.form.time){
                //     startTime  = changeDate(this.form.time[0]);
                //     endTime = changeDate(this.form.time[1]);
                // }
                var params = {
                    // startTime,
                    // endTime,
                    storeId: this.storeId,
                }
                const {data} = await assetOverview(params);
                // console.log(data)
                if (data) {
                    this.cwData = data
                    this.echarts2_option.series[0].data = data.allMoneyArr.map(item => item.money);
                    this.echarts2_option.series[1].data = data.effectiveArr.map(item => item.money);
                    this.echarts2_option.xAxis.data = data.allMoneyArr.map(item => item.hours);
                    this.zhentiEch()
                    this.bus.$emit('loading', false)
                }
            },
            changeTime(){
                this.getFinanceData()
            },
            zhentiEch() {
                let myChart = echarts.init(document.getElementById('zhentiEch'))
                myChart.setOption(this.echarts2_option, true)
            },
        }
    }
</script>
